<template>
	<div class="SearchList">
		<van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
		<!-- 容器 -->
		<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
		
			<!-- 懒加载 -->
			<div class="homepage-image" v-for="(item,index) in list" :key="index">
				<h3>{{item.title}}</h3>
				<div :class="{hide:item.poster_type==1,rightImg:item.poster_type==2,acticleImg:item.poster_type==3}">
					<img v-for="img in item.imageSrc" :src="img" />
				</div>
		
				<p>{{item.author}} 评论</p>
			</div>
		</van-list>
		<!-- <div class="aaa" @click="backTop" v-show="goTopShow">
			返回<br>顶部
		</div> -->
		
		</van-pull-refresh>
	</div>
</template>

<script>
	import {
		List,
		PullRefresh
	} from 'vant';
	import {search} from '../../api/api.js'
	
	export default{
		name:"SearchList",
		data(){
			return{
				loading: false, //是否正在加载中 
				finished: false, //是否全部加载完毕了
				skip:0,//从哪个数据开始拿
				limit:20,//一次拿几个数据
				// goTopShow:false,//默认回到顶部的按钮 不显示
				isRefresh:false,//是否正在刷新
				list:[],//最终放数据的数组
				key_word:''
			}
		},
		created() {
			this.key_word=this.$route.query.key_word
		},
		components: {
			[List.name]: List,
			[PullRefresh.name]:PullRefresh
		},
		methods:{
			getList(flag){
				let {key_word,skip,limit} =this;
				search({
					key_word,skip,limit
				}).then(res=>{
					console.log(res);
					if(res.code==0){
						// 判断是不是flag
						if(flag){
							// 如果有 flag 证明是个新的操作
							this.list=res.data;//如果是刷新 就传一个参
							this.isRefresh=false;//让上拉加载的转圈消失
						}else{
							this.list.push(...res.data);
						}
						
						let len=this.list.length;
						
						if(len>=res.count){
							this.finished=true
						}else{
							this.skip=len;
							this.loading=false;
							
						}
					}
				})
			},
			onRefresh(){
				// 清零的操作
				this.skip=0;
				this.finished=false
				
				// 调用
				this.getList(true)
			}
		}
	}
</script>

<style lang="less">
	.SearchList .homepage-image h3{
		
		width: 90%;
		margin: 0 auto;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>